<%@ page import="cn.milk.dao.MenuDAO" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增订单</title>
    <style>
        body {
            font-family: "Arial", sans-serif;
            margin: 0;
            padding: 0;
            background: url('background.jpg') no-repeat center center fixed;
            background-size: cover;
            color: #fff;
        }

        .container {
            max-width: 600px;
            margin: 50px auto;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            padding: 30px;
            color: #fff;
        }

        h1 {
            text-align: center;
            color: #ff6f61;
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #ddd;
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 16px;
            color: #495057;
        }

        input:focus {
            border-color: #ff6f61;
            outline: none;
            box-shadow: 0 0 5px rgba(255, 111, 97, 0.5);
        }

        .counter {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .counter button {
            padding: 10px 20px;
            background: #ff6f61;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 10px;
        }

        .counter button:hover {
            background-color: #ff5a4d;
        }

        .counter input {
            width: 60px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #ced4da;
            border-radius: 5px;
        }

        button {
            background-color: #ff6f61;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 10px;
        }

        button:hover {
            background-color: #ff5a4d;
        }

        a {
            text-decoration: none;
            color: #ff6f61;
            font-size: 14px;
        }

        a:hover {
            color: #ff5a4d;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<%
    Integer menuid = Integer.valueOf(request.getParameter("menuid"));
    String menuname = request.getParameter("menuname");
    Double price = Double.valueOf(request.getParameter("price"));
    request.setAttribute("menuname", menuname);
    request.setAttribute("menuid", menuid);
    request.setAttribute("price", price);
%>

<div class="container">
    <h1>新增订单</h1>
    <form method="post" action="OrderServlet">
        <input type="hidden" name="action" value="add" />
        <input type="hidden" name="userid" value="${sessionScope.user.userId}" />
        <input type="hidden" name="menuid" value="${menuid}" />

        <label for="price">单价：</label>
        <input type="number" id="price" name="price" value="${price}" readonly />

        <label for="count">数量：</label>
        <div class="counter">
            <button type="button" onclick="decrement()">-</button>
            <input type="number" id="count" name="count" min="1" value="1" required />
            <button type="button" onclick="increment()">+</button>
        </div>

        <input type="hidden" name="status" value="1" />

        <div style="text-align: center;">
            <button type="submit">保存</button>
            <a href="MenuServlet">返回</a>
        </div>
    </form>
</div>

<script>
    function increment() {
        const countInput = document.getElementById("count");
        countInput.value = parseInt(countInput.value) + 1;
    }

    function decrement() {
        const countInput = document.getElementById("count");
        if (parseInt(countInput.value) > 1) {
            countInput.value = parseInt(countInput.value) - 1;
        }
    }
</script>
</body>
</html>
